import React from 'react';
import { View, Image, Text, TouchableOpacity, ListView } from 'react-native';
import { format } from 'date-fns';
import BaseComponent from '../common/BaseComponent';
import SizeUtils from '../../common/SizeUtils';
import CommonListPage from '../common/CommonListPage';
import JianYiRequestOwnedAction from '../../actions/jianyi/JianYiRequestOwnedAction';
import CommonDataListView from '../common/CommonDataListView';
import Config from '../../config';

const typeValue = ['', '对App的建议或意见', '文体活动建议或意见', '投诉或举报'];
export default class MyFeedbackView extends BaseComponent {
	constructor(props) {
		super(props);
	}

	render() {
		return (
			<View
				style={{
					flex: 1,
					backgroundColor: '#F2F2F2',
					width: SizeUtils.getWindowSize().width
				}}
			>
				<CommonDataListView
					style={{
						width: SizeUtils.getWindowSize().width,
						height:
							SizeUtils.getWindowSize().height -
							SizeUtils.translateDesignHeightToCode(170) -
							Config.paddingTop
					}}
					ref={ref => {
						this._listView = ref;
					}}
					requestData={this._requestData.bind(this)}
					onRenderItem={this._onRenderItem.bind(this)}
					onRenderHeader={this._onRenderHeader.bind(this)}
					noEmpty={true}
					dataName={'data'}
				/>
			</View>
		);
	}

	_onRenderHeader() {
		return <View style={{ height: SizeUtils.translateDesignHeightToCode(20) }} />;
	}

	_onRenderItem(data, index) {
		// [ { Suggest_id: '5aa71cc75613cfc1ccc5e068',
		//   comment: '',
		//   create_at: '2018-03-13 08:35:19.354 +0800 CST',
		//   is_comment: 0,
		//   title: '对App的建议或意见,对App的建议或意见',
		//   type: 1,
		//   uid: '5a90fd805613cfc1ccb32a7a',
		//   update_at: '2018-03-13 08:35:19.354 +0800 CST' } ]
		const { type, title, create_at, Suggest_id, is_comment, update_at } = data;
		return (
			<TouchableOpacity
				key={Suggest_id}
				onPress={() => this._onPressItem(data)}
				style={{
					height: SizeUtils.translateDesignHeightToCode(174),
					width: SizeUtils.getWindowSize().width,
					backgroundColor: '#fff',
					paddingHorizontal: SizeUtils.translateDesignWidthToCode(28),
					paddingTop: SizeUtils.translateDesignHeightToCode(30),
					paddingBottom: SizeUtils.translateDesignHeightToCode(22),
					borderBottomWidth: SizeUtils.translateDesignNumToCode(3),
					borderBottomColor: '#F2F2F2'
				}}
			>
				<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
					<Text
						style={{
							fontSize: SizeUtils.translateFontSizeToCode(26),
							color: '#000000'
						}}
					>
						{typeValue[type]}
					</Text>
					{this.getItemCommentType(is_comment === 1)}
				</View>

				<Text
					numberOfLines={1}
					style={{
						width:
							SizeUtils.getWindowSize().width -
							SizeUtils.translateDesignWidthToCode(100),
						fontSize: SizeUtils.translateFontSizeToCode(26),
						color: '#66686B',
						marginTop: SizeUtils.translateDesignHeightToCode(16)
					}}
				>
					{title}
				</Text>
				<View
					style={{
						marginTop: SizeUtils.translateDesignHeightToCode(29),
						alignItems: 'flex-end'
					}}
				>
					<Text
						style={{
							fontSize: SizeUtils.translateFontSizeToCode(22),
							color: '#979797'
						}}
					>
						{format(create_at, 'YYYY.MM.DD HH:mm')}
					</Text>
				</View>
			</TouchableOpacity>
		);
	}

	// 每行 右上角是否回复
	getItemCommentType(isComment) {
		const color = isComment ? '#f42a26' : '#9f9f9f';
		const text = isComment ? '已回复' : '未回复';
		return (
			<View
				style={{
					height: SizeUtils.translateDesignHeightToCode(32),
					width: SizeUtils.translateDesignWidthToCode(84),
					borderWidth: SizeUtils.translateDesignNumToCode(3),
					borderColor: color,
					borderRadius: SizeUtils.translateFontSizeToCode(6),
					alignItems: 'center',
					justifyContent: 'center'
				}}
			>
				<Text style={{ color, fontSize: SizeUtils.translateFontSizeToCode(22) }}>
					{text}
				</Text>
			</View>
		);
	}

	_requestData(page, listView) {
		new JianYiRequestOwnedAction().call(listView, {page:page,sort_id:1});
	}

	_onPressItem(data) {
		this.gotoPage(Config.pages.jianyi_comment, { data: data });
	}
}
